<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>06练习2_到达底部</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .content {
      height: 298px;
      border: 1px solid #000;
      text-align: center;
      line-height: 298px;
    }

    div:nth-child(2n) {
      background: deepskyblue;
    }

    div:nth-child(2n-1) {
      background: pink;
    }
  </style>
</head>

<body>
  <div id='div'>
    <div class="content">我是content1</div>
    <div class="content">我是content2</div>
    <div class="content">我是content3</div>
    <div class="content">我是content4</div>
    <div class="content">我是content5</div>
    <div class="content">我是content6</div>
    <div class="content">我是content7</div>
    <div class="content">我是content8</div>
    <div class="content">我是content9</div>
    <div class="content">我是content10</div>
  </div>
</body>

<script>
  //监控滚动条滑到浏览器底部，给提示

  //直接到底
  // window.onscroll = function(){
  //   var scrollHeight = document.documentElement.scrollHeight;//页面总高
  //   var clientHeight = document.documentElement.clientHeight;//视口高
  //   var scrollTop = document.documentElement.scrollTop;//滚动距离

  //   if(scrollHeight - clientHeight <= scrollTop){
  //     console.log("到底了");
  //   }

  // }

  //比较适合做懒加载效果
  var div = document.getElementById('div')
  // window.onscroll = function () {
  //   var scrollHeight = document.documentElement.scrollHeight;//页面总高
  //   var clientHeight = document.documentElement.clientHeight;//视口高
  //   var scrollTop = document.documentElement.scrollTop;//滚动距离
  //   if (scrollHeight - clientHeight - scrollTop <= 400) {
  //     console.log(123)
  //     div.innerHTML += `<div class="content">我是content11</div>`
  //   }
  // }
  function monitor(Height) {
    var scrollHeight = document.documentElement.scrollHeight;//页面总高
    var clientHeight = document.documentElement.clientHeight;//视口高
    var scrollTop = document.documentElement.scrollTop;//滚动距离
    return scrollHeight - clientHeight - scrollTop <= Height
  }
  monitor(200)











</script>

</html>